<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="menu_manager">菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/layuimini.css" media="all">
    <link rel="stylesheet" href="../../static/css/themes/default.css" media="all">
    <link rel="stylesheet" href="../../static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../static/css/public.css" media="all">
    <!--引入dtree.css-->
    <link rel="stylesheet" href="../../static/layui_ext/dtree/dtree.css" />
    <!--引入dtree-font.css-->
    <link rel="stylesheet" href="../../static/layui_ext/dtree/font/dtreefont.css" />
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row">
                <!--左侧菜单树-->
                <div class="layui-col-md2">
                    <!--树节点容器开始-->
                    <ul id="menuTree" class="dtree" data-id="0" style="width:240px"></ul>
                    <!--树节点容器结束-->
                </div>
                <!--右侧数据表格-->
                <div class="layui-col-md10">
                    <!--表格工具栏 -->
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon">&#xe624;</i> 添加 </button>
                        </div>
                    </script>
                    <!--表格区域-->
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                    <!--行工具栏-->
                    <script type="text/html" id="currentTableBar">
                        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
                    </script>
                    <!--添加修改窗口弹出层-->
                    <div style="display: none;padding:5px" id="addOrUpdateWindow">
                        <form class="layui-form " style="width: 95%" id="dataFrm" lay-filter="dataFrm">
                            <!--菜单编号-->
                            <input type="hidden" name="id" />
                            <div class="layui-form-item">
                                <label class="layui-form-label">父级菜单</label>
                                <div class="layui-input-block">
                                    <!--父级菜单编号-->
                                    <input type="hidden" name="pid" id="pid" dtree-node="pid">
                                    <ul id="menuSelectTree" class="dtree" data-id="0"></ul>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">菜单名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" id="title"  class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">图标</label>
                                <div class="layui-input-block">
                                    <input type="hidden" name="icon" id="icon" value="" />
                                    <input type="text" name="iconPicker" id="iconPicker" style="display: none" value="" class="hide" lay-filter="iconPicker">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">路径</label>
                                <div class="layui-input-block">
                                    <input type="text" name="href" id="href" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="status" value="1" title="启用" checked>
                                        <input type="radio" name="status" value="0" title="禁用" >
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">弹出样式</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="target" value="_href" title="当前页" checked>
                                        <input type="radio" name="target" value="_blank" title="新选项卡" >
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea type="textarea" name="remark" id="remark" class="layui-textarea" ></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="padding-left: 15%">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><i class="layui-icon">&#xe605;</i>确认</button>
                                    <button type="reset" class="layui-btn layui-btn-warm"><i class="layui-icon">&#xe9aa;</i>清空</button>
                                    <button type="button" class="layui-btn layui-btn-danger" id="resetMenu"><i class="layui-icon">&#xe65c;</i>重置父级菜单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../../static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../static/module/common.js" ></script>
<script>
    layui.extend({
        dtree:"../../static/layui_ext/dtree/dtree",
        iconPickerFa: "../../static/js/lay-module/iconPicker/iconPickerFa"
    }).use(["layer","form","dtree","jquery","table",'iconPickerFa'],function () {
            var layer = layui.layer,
                form = layui.form,
                table = layui.table,
                dtree = layui.dtree,
                iconPickerFa = layui.iconPickerFa,
                $ = layui.jquery;
            var url,mainIndex;
        //图标选择器
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            //fa 图标接口
            url: "../../static/lib/font-awesome-4.7.0/less/variables.less",
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 每个图标格子的宽度：'43px'或'20%'
            cellWidth: '43px',
            // 点击回调
            click: function (data) {
                $("#icon").val("fa "+data.icon);
            }
        });

        //渲染树形组件
        var menuTree =dtree.render({
            elem: "#menuTree",
            url: "/admin/menu/loadMenuTree",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",
            line: true,  // 显示树线
            // nodeIconArray: {"3":{"open":"dtree-icon-xiangxia1","close":"dtree-icon-xiangyou"}},
            leafIconArray:{"11":"dtree-icon-dian"},
            ficon: ["1","11"],
            // icon: "-1",  // 隐藏二级图标
            skin: "layui",
            response:{message:"msg",statusCode:0}  //修改response中返回数据的定义
        });
        //渲染下拉菜单树组件
        var menuSelectTree =dtree.renderSelect({
            elem: "#menuSelectTree",
            url: "/admin/menu/loadMenuTree",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
            selectInputName: { //指定下拉树的默认显示值
                nodeId: "pId"
            }
        });
        //重置父级菜单
        $("#resetMenu").click(function (){
           menuSelectTree.selectResetVal(); //自带方法，重置选择
        });
        //数据表格
        let tableIns = table.render({
            elem: '#currentTableId',
            url: '/admin/menu/list',
            toolbar: '#toolbarDemo',
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'id',width: 100,title: '菜单编号', sort: true,align: "center"},
                    {field: 'title', width: 100, title: '菜单名称',edit:true,align: "center"},
                    {field: 'href',  title: '菜单地址', sort: true,align: "center"},
                    {field: 'icon', width: 80, title: '图标', sort: true,align: "center",templet:function (d) {
                                return "<i class='"+d.icon+"'></i>";
                        }},
                    {field: 'remark',  title: '备注信息', sort: true,align: "center"},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            done: function(res,curr,count){ //解决当一页的最后一个数据被删除后，不会跳转到前一页的问题
                //判断当前页码是否大于1且当前页数据量为0
                if(curr > 1 && res.data.length == 0){
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr:pageValue}
                    })
                }
            }
        });
        //树形菜单的点击事件
        dtree.on("node('menuTree')" ,function(obj){
            tableIns.reload({
                //id是实体类的属性名,nodeId是当前选中节点的id值
                where: {"id":obj.param.nodeId}
            });
        });

        /**
         * 打开编辑窗口
         * @param data 行数据
         */
        function openUpdateWindow(data) {
            mainIndex = layer.open({
                title: '编辑菜单',
                type: 1,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['41%', '70%'],   //宽，高
                content: $("#addOrUpdateWindow"),   //引用的内容窗口
                success: function () {
                    //提交地址
                    url = "/admin/menu/update";
                    //表单数据回显
                    console.log(data);
                    form.val("dataFrm",data);
                    //设置图标回显
                    iconPickerFa.checkIcon('iconPicker', data.icon);
                    //设置父级下拉菜单回显
                    //初始化节点
                    dtree.dataInit("menuSelectTree",data.pId);
                    //设置下拉树的初始展示值
                    dtree.selectVal("menuSelectTree");
                    //判断当前选中节点是否是一级菜单，如果是，那么应该选“请选择”
                    if (data.pId == 0){
                        menuSelectTree.reload();
                    }
                }
            })
        };
        /**
         * 删除操作
         * @param data 行数据
         */
        function deleteById(data) {
            //发送请求查询该类型下是否存在电影信息
            console.log(data.id)
            $.get("/admin/menu/hasChild",{"id":JSON.stringify(data.id)},function (result) {
                if (result.exist) {
                    layer.alert(result.message, {icon: 0});
                } else {
                    //提示用户是否确认删除
                    layer.confirm('确定要删除菜单[<span style="color:red">' + data.title + '</span>]吗？', {
                        icon: 3,
                        title: "提示"
                    }, function (index) {
                        // obj.del();
                        //发送删除请求
                        $.post("/admin/menu/del", {"id": data.id}, function (result) {
                            if (result.success) {
                                //成功
                                layer.alert(result.message, {icon: 1});
                                //刷新当前数据表格
                                tableIns.reload();
                                //刷新左侧菜单
                                menuTree.reload();
                                //刷新下拉菜单
                                menuSelectTree.reload();
                            } else {
                                //提示
                                layer.alert(result.message, {icon: 2})
                            }
                        }, "json");
                        layer.close(index);
                    });
                }
            },"json")
        };
        //监听行工具栏事件
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                openUpdateWindow(data);
                return false;
            } else if (obj.event === 'delete') {
                deleteById(data);
            }
        });
        //打开添加窗口
        function openAddWindow() {
            mainIndex = layer.open({
                title: '添加菜单',
                type: 1,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['41%', '70%'],   //宽，高
                content: $("#addOrUpdateWindow"),   //引用的内容窗口
                success: function () {
                    //提交地址
                    url = "admin/menu/add";
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    //设置默认图标
                    iconPickerFa.checkIcon('iconPicker', 'fa fa-star');
                    $("#icon").val("fa fa-star");
                }
            })
        }

        /**
         * toolbar监听头部工具栏事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                openAddWindow();
            }

        });
        /**
         * 监听提交
         */
        form.on('submit(doSubmit)', function (data) {
            //发送请求
            $.post(url,data.field,function (result) {
                if (result.success){
                    //成功
                    layer.alert(result.message,{icon:1});
                    //刷新当前数据表格
                    tableIns.reload();
                    //刷新左侧菜单
                    menuTree.reload();
                    //刷新下拉菜单
                    menuSelectTree.reload();
                    //关闭当前窗口
                    layer.close(mainIndex);
                }else {
                    //失败
                    layer.alert(result.message,{icon:2});
                }
            },"json");
            return false;
        });
    });
</script>
</html>